@charset "utf-8";

/* css for timepicker */
.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }

.ui-timepicker-rtl{ direction: rtl; }
.ui-timepicker-rtl dl { text-align: right; }
.ui-timepicker-rtl dl dd { margin: 0 65px 10px 10px; }

html {
	height: 100%;
	width: 100%;
	min-width: 1200px;
}

body {
	color: #000;
	height: 100%;
	width: 100%;
	margin: 0px;
	padding: 0px;
	font: 90%/1.4 Arial;
	overflow:hidden;
	background: url(images/ui-bg_diagonals-thick_90_eeeeee_40x40.png) repeat 0 center;
}

/* ~~ Селекторы элементов/тегов ~~ */
ul,ol,dl {
	/* Из-за различий между браузерами рекомендуется обнулять поля в списках. Для согласованности можно указать нужные величины либо здесь, либо в элементах списка (LI, DT, DD), которые они содержат. Помните, что сделанное здесь последовательно включается в список .nav, если только не будет прописан более конкретный селектор. */
	padding: 0;
	margin: 0;
}

h1,h2,h3,h4,h5,h6,p {
	margin-top: 0;
	/* удаление верхнего поля позволяет обойти проблему выхода полей за границы содержащего их контейнера DIV. Оставшееся нижнее поле отделит его от любых последующих элементов. */
	padding-right: 15px;
	padding-left: 15px;
	/* добавление боковых полей к элементам внутри контейнеров DIV, а не к самим контейнерам избавляет от необходимости расчетов рамочной модели. В качестве альтернативы можно использовать вложенный контейнер DIV с боковыми полями. */
}

a img {
	/* этот селектор убирает стандартную синюю рамку, которая появляется у изображений в некоторых браузерах, если вокруг изображения есть ссылка */
	border: none;
}

/* ~~ Оформление ссылок на вашем сайте должно оставаться в этом порядке, включая группу селекторов, создающих эффект наведения. ~~ */
a:link {
	color: #414958;
	text-decoration: underline;
	/* если только ссылки не должны выглядеть исключительно своеобразно, то для быстрого зрительного распознавания рекомендуется использовать подчеркивание */
}

a:visited {
	color: #4E5869;
	text-decoration: underline;
}

a:hover,a:active,a:focus {
	/* эта группа селекторов обеспечивает пользователю, работающему с клавиатурой, такие же возможности наведения, как и при использовании мыши. */
	text-decoration: none;
}

/* ~~ этот контейнер окружает все остальные контейнеры DIV, задавая их ширину на процентной основе ~~ */
.container {
	height: 100%;
	overflow: none;
	width: 100%;
	margin: 0px auto;
    padding-top: 10px;
}

/* ~~ верхнему колонтитулу не задана ширина. Он растянется на всю ширину макета. Он содержит заполнитель для изображения, который должен быть заменен логотипом по ссылке ~~ */
.header {

}

#logo {
	height: 100%;
	width: 16%;
	float: left;
	white-space: nowrap;
	font-style: italic;
	cursor: pointer;
	font-size: 64px;
}

.header .account {
	height: 70px;
	float: left;
}

.content {
	height: 100%;
}

#nextMonth {
	float: left;
	margin: 0 3px;
	width: 5%;
}

#prevMonth {
	float: left;
	margin: 0 3px;
	width: 5%;
}

#todayButton {
	float: left;
	margin: 0 5px;
	width: 10%;
}

#currentMonth {
    text-align: center;
	font-size: 40px;
	text-shadow: 5px 3px 8px black;
}

.calendarWrapper {
	height: 100%;
	width: 20%;
	float: left;
}

.calendarSidebar {
	height: 100%;
	width: 100%;
	font-size: 16px;
}
.calendarSidebar nav button{
	width: 100%;
	margin:0px;
}
.calendar {
	height: 100%;
	width: 77%;
	padding: 0 1%;
	float: left;
}

.calendarHeader {
	height: 8%;
	width: 100%;
	float: left;
	position: relative;
	text-align: center;
}
.calendarHeader button span.ui-button-text{
	padding: 0px;
}

.calendar #daysNameTable {
	position: relative;
	top: 0px;
	left: 0px;
	height: 5%;
	table-layout: fixed;
}
.calendar #daysNameTable th {
	font-weight: lighter;
	text-shadow: 1px 1px 1px grey;
}

.calendar #calendarTableWrapper {
	height: 90%;
	width: 100%;
	table-layout: fixed;
}

.calendar #calendarTableWrapper table {
	height: 100%;
	width: 100%;
	table-layout: fixed;
}

.calendar #calendarTableWrapper table tr {
	
}

.calendar .day {
	text-align: right;
	vertical-align: top;
	padding: 5px;
	font-size:12px;
}

.calendar ul,.calendar ol {
	color: black;
	padding: 0 5px 5px 15px;
	font: 12px/1.2 Arial;
	text-align: left;
}
.calendar li .timeRange{
	-webkit-margin-before: 0;
	-webkit-margin-after: 0;
	font-size:10px;	
	display:'inline';
	float:right;
}

.calendar .day.active {
}

.calendar .day.nonactive {
	border:0px;
	visibility:hidden;
}

.calendar .day.today {
	padding:2px;
	background-image:none;
	border: 2px solid #F9DD34;
	background-color: #FFEF8F;
}
.calendar .day.selected{
	background-color:#FFDFDF;
}


.todoWrapper {
	height: 100%;
	width: 20%;
	position: relative;
	float: left;
	display: none;
}

.todoWrapper .todoArrows {
	position: absolute;
	left: -22px;
	top: -1px;
}

.todoWrapper .todoArrows .arrows {
	position: absolute;
	top: -2px;
	width: 26px;
	height: 42px;
}

.todoWrapper .todoSidebar {
	height: 100%;
	display: block;
	width: 100%;
	float: right;
}
.todoWrapper .todoSidebar nav button{
	width: 100%;
	margin:0px;
}

.todoWrapper .todoSidebar .close {
	position: relative;
	float: right;
	top: -15px;
	background: url(../IMG/close_icon.png) no-repeat 0 center;
	width: 13px;
	height: 13px;
	cursor: pointer;
}

.todoWrapper .todoSidebar .todoActions {
	position: absolute;
	bottom: 0;
}

/* ~~ Стили списка навигации (можно убрать, если решено использовать готовое подменю, например Spry) ~~ */
ul.nav {
	list-style: none; /* удаляет маркер списка */
	border-top: 1px solid #666;
	/* создает верхнюю границу ссылок — все остальные размещаются с использованием нижней границы в LI */
	margin-bottom: 15px;
	/* создает пространство между навигацией по содержимому ниже */
}

ul.nav li {
	border-bottom: 1px solid #666; /* разделяет кнопки */
	background-color: #CCC;
}

ul.nav li .navarrows {
	position: relative;
	float: left;
	width: 20px;
	top: 4px;
	left: 6px;
}

nav li .active {
	
}

nav div {
	margin-left: 2px;
}

nav div .item {
	display: block;
	cursor: pointer;
}

nav div .item .square {
	position: relative;
	top: 5px;
	float: left;
	margin: 0px 5px;
	width: 10px;
	height: 10px;
	border: 1px solid #CCC;
	background-color: #FFF;
}

nav div .item .active {
	background-color: #A5F777;
}

ul.nav a,ul.nav a:visited {
	/* группировка этих селекторов гарантирует, что ссылки будут выглядеть как кнопки даже после того, как пользователь перейдет по ним */
	padding: 5px 5px 5px 25px;
	display: block;
	/* наделяет ссылку свойствами блока, из-за чего она заполняет весь содержащий ее элемент LI. При этом вся область реагирует на щелчок мышью. */
	text-decoration: none;
	color: #000;
}

ul.nav a:hover,ul.nav a:active,ul.nav a:focus {
	/* изменяет цвет текста и фона при навигации с помощью клавиатуры и мыши */
	color: #FFF;
	background-color: #999;
}

/* ~~ прочие классы float/clear ~~ */
.fltrt {
	/* этот класс можно использовать для обтекания элемента справа на странице. Обтекаемый элемент должен предшествовать элементу, с которым он должен находиться рядом на странице. */
	float: right;
	margin-left: 8px;
}

.fltlft {
	/* этот класс можно использовать для обтекания элемента слева на странице. Обтекаемый элемент должен предшествовать элементу, с которым он должен находиться рядом на странице. */
	float: left;
	margin-right: 8px;
}

.clearfloat {
	/* этот класс можно поместить в теге <br /> или в пустом блоке DIV в качестве конечного элемента, следующего за последним обтекаемым DIV (внутри #container), если .#footer удален или извлечен из #container */
	clear: both;
	height: 0;
	font-size: 1px;
	line-height: 0px;
}

.arrow-u {
	background: url(../IMG/arrow_grey_up.png) no-repeat 0 center;
}

.arrow-r {
	background: url(../IMG/arrow_grey_right.png) no-repeat 0 center;
}

.arrow-d {
	background: url(../IMG/arrow_grey_down.png) no-repeat 0 center;
}

.arrow-l {
	background: url(../IMG/arrow_grey_left.png) no-repeat 0 center;
}

#calendarAdd {
	position: absolute;
	top: 4px;
	right: 4px;
	padding-bottom: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}
.todoAdd{
	position: absolute;
	top: 4px;
	left: 4px;
	padding-bottom: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}
#calendarAddForm {
	z-index: 300;
	position: absolute;
	height: auto;
	width: auto;
	top: 100px;
	left: 100px;
	display: none;
	padding: 0.2em;
}
#calendarAddForm .title{
	text-align: left;
	margin-top: 7px;
	margin-bottom: 7px;
	padding-left: 15px;
	font-size: 16px;
}

.calendarEdit:hover {
	color: #333;
	cursor: pointer;
}

.calendarEdit {
	width: 20px !important;
	height: 20px !important;
	margin-right: 7px !important;
	padding: 0px !important;
	margin: 0px !important;
	float: right;
	display:none;
	overflow:hidden;
}
.todoEdit{
	width:20px !important;
	height:20px !important;
	margin-right: 7px !important;
	padding:0px !important;
	margin: 0px !important;
	float: right;
	display:none;
}
.todoRemove{
	width:20px !important;
	height:20px !important;
	margin-right: 7px !important;
	padding:0px !important;
	float: right;
	display:none;
}
#calendarEditForm {
	z-index: 301;
	position: absolute;
	width: 230px;
	top: 100px;
	left: 100px;
	display: none;
}
#calendarEditForm button{
	width: 228px;
	font-size: 17px;
	margin:1px;
	-moz-border-radius: 2px; /* Firefox */
	-webkit-border-radius: 2px; /* Safari, Chrome */
	-khtml-border-radius: 2px; /* KHTML */
	border-radius: 2px;
}

.popupMask {
	display: none;
	left: 0;
	position: absolute;
	top: 0;
	z-index: 100;
}

.addForm {
	text-align: center;
}

.editForm {
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 25px;
}

.editForm:hover {
	cursor: pointer;
	background-color: #D5DFE1;
}

.calendar_id {
	display: none;
}

#editEventsForm {
	padding:10px;
	z-index:306;
	position:absolute;
	top:300px;
	left:300px;
	width:auto;
	display:none;
}
#addEventsForm {
	padding:10px;
	z-index:306;
	position:absolute;
	top:300px;
	left:300px;
	width:auto;
	display:none;
}
#editCalendarForm {
	z-index:306;
	position:absolute;
	top:400px;
	left:400px;
	width:300px;
	display:none;
}

#editCalendarForm .title{
	text-align: left;
	margin-top: 7px;
	margin-bottom: 7px;
	padding-left: 15px;
	font-size: 16px;
}
.addEditForm input{
	width:99%;
}
#editCalendarForm .addEditForm{
	margin:0 4px;
}
#viewEventForm {
	padding:10px;
	z-index:306;
	position:absolute;
	top:300px;
	left:300px;
	width:auto;
	display:none;
}
#saveCalendarButton{
	width: 90px;
	padding: 0px;
}
.event_id {
	display: none;
}
#calendarTableWrapper li{
	cursor : pointer;
}
#calendarSideBarDatepicker{
	
}
#calendarSideBarDatepicker .ui-datepicker{
	width:97%;
    display: inline-block !important;
}
.owner_name{
	float: right;
	font-size: 9px;
	color: grey;
	margin-top: 5px;
	margin-right: 3px;
}
.beforeDays{
	margin-left:0px;
	width:25px;
}
.beforeHours{
	margin-left:0px;
	width:25px;
}
.beforeMinutes{
	margin-left:0px;
	width:25px;
}
.form_title:hover .ui-icon{
	cursor:pointer;
}
#todosEditForm {
	z-index: 301;
	position: absolute;
	top: 100px;
	left: 100px;
	display: none;
}
#selectEventsCalendar{
	width:100%;
	background-color: white;
	border: 2px inset;
}
#selectEventsCalendarEditForm{
	width:100%;
	border: 2px inset;
}
#addEventSubmit span, #addCalendarSubmit span,#saveCalendarButton span{
	padding: 2px;
}
#viewEventContainer label{
	color: grey;
	font-size: 14px;
}
#exit{
    float:left;
    width: 25px;
    height: 25px;
    margin: 5px 15px;
}
#exit:hover,#exit:active,#exit:focus {
	text-decoration:underline;
	cursor:pointer;
}
select{
	background-color: white;
}

.eventOfDay{
	cursor:pointer;
}